Gracias por tomarse el tiempo de leer esto, para un poco de información estoy usando React 17 con Webpack.
Dentro de mi componente principal, tengo muchos componentes secundarios condicionales (dependiendo de mi estado), que por razones de rendimiento quiero Lazy Load (solo cuando y si es necesario).
Sin embargo, al usar mi solución actual cada vez que se vuelve a procesar mi "Componente principal" (cambio de estado), el Componente secundario se vuelve a cargar demasiado (independientemente de si "estado.algún valor" se ha actualizado o no) y pierde su propio estado y parpadea donde se vuelve a representar el HTML.
Aquí hay un ejemplo:
class ParentComponent extends React.Component { __renderChildComponent1(){ const ChildComponent = React.lazy(() => import( /* webpackMode: "lazy" */ /* webpackChunkName: "childa" */ './ChildA.jsx' ) ); return ( <Suspense fallback=""> <ChildComponent myprop={ this.state.somevalue } /> </Suspense> ) } __renderChildComponent2(){ const ChildComponent = React.lazy(() => import( /* webpackMode: "lazy" */ /* webpackChunkName: "childb" */ './ChildB.jsx' ) ); return ( <Suspense fallback=""> <ChildComponent myprop={ this.state.somevalue } /> </Suspense> ) } __renderChildComponent(){ switch(this.state.myoption){ case "1": return this.__renderChildComponent1(); break; case "2": return this.__renderChildComponent2(); break; default: return null; break; } } render(){ <div className="component-a"> { this.__renderChildComponent() } </div> } }En su lugar, intenté asignar mi componente secundario a una propiedad de mi componente principal, por ejemplo:
this.ChildComponent = false; if(!this.childComponent){ const ChildComponent = React.lazy(() => import( /* webpackMode: "lazy" */ /* webpackChunkName: "childb" */ './ChildB.jsx' ) ); this.childComponent = ( <Suspense fallback=""> <ChildComponent myprop={ this.state.somevalue } /> </Suspense> ) } else { return this.childComponent; }Pero al hacer esto, mi childComponent ya no recibe actualizaciones de estado de su padre.
¿Cuál es la mejor manera de lograr esto?
Gracias de antemano.
No estoy seguro de si este es un buen patrón , pero la solución que se me ocurrió es tener una matriz en el estado de los componentes secundarios:
this.state.children=[null,null] // initially they are two indexes of null, for the two children. cada vez que se actualice this.state.myoption , verifique si el elemento secundario correspondiente es null y, si lo es, la carga diferida.
componentDidUpdate() { if (this.state.children[this.state.myoption] === null) { import("PATH").then((component) => { const newChildrenArray = [...this.state.children]; newChildrenArray[this.state.myoption] = component; this.setState({ children: newChildrenArray }); }); } }finalmente, dentro del renderizado, verifique si el componente necesario está disponible y renderícelo.
render(){ let Component = this.state.children[this.state.myoption] <div className="component-a"> {Component?<Component/>:""} </div>